video{
    width:100%;
}
#media{

}
/*音频*/
#media .audio-item{

}

/*视频*/
#media .video-item{
    margin-bottom:1rem;
    background-color: #ccc;
}
#media .screen{
    width: 18.75rem;
    height: 9.375rem;
    position: relative;
    background-color: #000;
}
#media .screen video{
    display: inline-block;
    vertical-align: middle;
    clear:both;
    margin:auto;
    height:100%;
}

#media .screen-video-controls{
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    background-color: #000;
    opacity:0.5;
}
#media .video-item .control-pause{
    display: none;
}
#media .video-controls{
    overflow: hidden;
    padding:0.2rem 0;
}
#media .video-progress-bar{
    position: relative;
    width:100%;
    height:1rem;

    cursor: pointer;

    /*-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
}
#media .video-progress-bar .total{
    position: absolute;
    width:100%;
    border-top:1px solid #ddd;
    margin:0.5rem 0;
    z-index:1;
}
#media .video-progress-bar .buffer{
    position: absolute;
    width:50%;
    border-top:1px solid #888;
    margin:0.5rem 0;
    z-index: 10;
}
#media .video-progress-bar .current{
    position: absolute;
    width:0;
    border-top:1px solid #4285f4;
    margin:0.5rem 0;
    z-index: 100;
}
#media .video-progress-bar .slide-btn{
    position: absolute;
    margin:0.3rem 0;
    margin-left:-0.075rem;
    padding:0.2rem 0.1rem;
    background-color: #4285f4;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    z-index: 1000;
}
#media .video-progress-time{
    font-size: 0.6rem;
    text-align: center;
    line-height: 1rem;
}
#media .control-play,#media .control-pause{
    font-size:1rem;
    text-decoration: none;
    display:inline-block;
    line-height: 100%;
}

#media .control-play:hover,#media .control-pause:hover{
    color:#007bff;
}
#media .screen-video-controls{
    text-align: center;
}
#media .screen-video-controls .iconfont{
    display: inline-block;
    line-height: 2rem;
    font-size:2rem;
    color:#fff;
    margin-top:4rem;
}
/*音量*/
#media .volume-control{
    font-size: 1rem;
    line-height: 100%;
}
#media .volume-bar{
    line-height: 1rem;
}

/*gif*/
#media .gif-item{

}